const canvas = document.getElementById('oscilloscope');
const ctx = canvas.getContext('2d');

// 设置 canvas 大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 边距
const margin = 50;

// 网格参数
const gridSize = 50; // 每个小格子的大小
const majorGridSize = gridSize * 5; // 每5个小格子一个大格子

// 绘制网格
function drawGrid() {
  const width = canvas.width - 2 * margin;
  const height = canvas.height - 2 * margin;

  ctx.strokeStyle = '#ccc';
  ctx.lineWidth = 1;

  // 绘制垂直网格线
  for (let x = margin; x <= canvas.width - margin; x += gridSize) {
    ctx.beginPath();
    ctx.moveTo(x, margin);
    ctx.lineTo(x, canvas.height - margin);
    ctx.stroke();
  }

  // 绘制水平网格线
  for (let y = margin; y <= canvas.height - margin; y += gridSize) {
    ctx.beginPath();
    ctx.moveTo(margin, y);
    ctx.lineTo(canvas.width - margin, y);
    ctx.stroke();
  }

  // 绘制大格子的虚线
  ctx.strokeStyle = '#999';
  ctx.lineWidth = 1;
  ctx.setLineDash([5, 5]);

  // 绘制垂直大网格线
  for (let x = margin; x <= canvas.width - margin; x += majorGridSize) {
    ctx.beginPath();
    ctx.moveTo(x, margin);
    ctx.lineTo(x, canvas.height - margin);
    ctx.stroke();
  }

  // 绘制水平大网格线
  for (let y = margin; y <= canvas.height - margin; y += majorGridSize) {
    ctx.beginPath();
    ctx.moveTo(margin, y);
    ctx.lineTo(canvas.width - margin, y);
    ctx.stroke();
  }

  ctx.setLineDash([]); // 重置虚线样式
}

// 绘制坐标轴
function drawAxes() {
  const width = canvas.width - 2 * margin;
  const height = canvas.height - 2 * margin;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;

  // 绘制X轴
  ctx.beginPath();
  ctx.moveTo(margin, canvas.height / 2);
  ctx.lineTo(canvas.width - margin, canvas.height / 2);
  ctx.stroke();

  // 绘制Y轴
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, margin);
  ctx.lineTo(canvas.width / 2, canvas.height - margin);
  ctx.stroke();
}

// 绘制刻度
function drawTicks() {
  const width = canvas.width - 2 * margin;
  const height = canvas.height - 2 * margin;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;

  // 绘制X轴刻度
  for (let x = margin; x <= canvas.width - margin; x += gridSize) {
    ctx.beginPath();
    ctx.moveTo(x, canvas.height / 2 - 5);
    ctx.lineTo(x, canvas.height / 2 + 5);
    ctx.stroke();
  }

  // 绘制Y轴刻度
  for (let y = margin; y <= canvas.height - margin; y += gridSize) {
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2 - 5, y);
    ctx.lineTo(canvas.width / 2 + 5, y);
    ctx.stroke();
  }
}

// 绘制四条边
function drawBorders() {
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;

  // 上边
  ctx.beginPath();
  ctx.moveTo(margin, margin);
  ctx.lineTo(canvas.width - margin, margin);
  ctx.stroke();

  // 下边
  ctx.beginPath();
  ctx.moveTo(margin, canvas.height - margin);
  ctx.lineTo(canvas.width - margin, canvas.height - margin);
  ctx.stroke();

  // 左边
  ctx.beginPath();
  ctx.moveTo(margin, margin);
  ctx.lineTo(margin, canvas.height - margin);
  ctx.stroke();

  // 右边
  ctx.beginPath();
  ctx.moveTo(canvas.width - margin, margin);
  ctx.lineTo(canvas.width - margin, canvas.height - margin);
  ctx.stroke();
}

// 绘制示波器图表
function drawOscilloscope() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  drawGrid();
  drawAxes();
  drawTicks();
  drawBorders();
}

// 初始化绘制
drawOscilloscope();

// 窗口大小改变时重新绘制
window.addEventListener('resize', () => {
  // 更新 canvas 大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 重新绘制图表
  drawOscilloscope();
});